package com.weedsdream.app.compose

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.weedsdream.app.R
import com.weedsdream.app.colorplate.ColorPlateMain
import com.weedsdream.app.colorplate.curRGB
import com.weedsdream.compose.Space

/**打开取色板*/
private var openPlate by mutableStateOf(false)

/**取色板附加按钮组
 * @param lAttach 附加的取色板按钮左侧控制内容
 * @param boxAttach 附加的全屏Ui*/
@Preview(widthDp = 600, heightDp = 350)
@Composable
fun ColorPlateAttachButton(
    lAttach: @Composable RowScope. () -> Unit = {}, boxAttach: @Composable BoxScope.() -> Unit = {}
) {
    Box(Modifier.fillMaxSize()) {
        Row(Modifier.align(Alignment.TopEnd)) {
            lAttach()
            AttachBtn("取色板", R.drawable.plates, curRGB) { openPlate = !openPlate }
        }
        boxAttach()
        if (openPlate) {
            Space(Color.Black, 0.7f) { openPlate = !openPlate }
            Box(
                Modifier
                    .fillMaxSize(0.9f)
                    .align(Alignment.BottomEnd)
            ) {
                Space(Color.White, 0.5f) {}
                ColorPlateMain()
            }
        }
    }
}


/**此部分统一按钮*/
@Composable
fun AttachBtn(tag: String, icon: Int, color: Color = Color.Black, click: () -> Unit) {
    Box(
        Modifier
            .alpha(0.8f)
            .padding(2.dp)
            .size(45.dp)
            .clickable { click() }) {
        Column(Modifier.align(Alignment.Center)) {
            Icon(
                painterResource(id = icon), null, tint = Color.Unspecified,
                modifier = Modifier
                    .size(30.dp)
                    .align(Alignment.CenterHorizontally)
            )
            Text(
                text = tag, fontSize = 10.sp, color = color,
                modifier = Modifier.align(Alignment.CenterHorizontally)
            )
        }
    }
}